<template>
  <div class="directorys-container">
    <el-card>
      <!-- 筛选 -->
      <el-row>
        <el-col :span="18">
          <el-form label-width="80px" :inline="true" :model="requestParams" class="demo-form-inline">
            <el-form-item label="目录名称">
              <el-input v-model="requestParams.directoryName" style="200px" />
            </el-form-item>
            <el-form-item label="状态">
              <el-select v-model="requestParams.state">
                <el-option :value="1" label="启用" />
                <el-option :value="0" label="禁用" />
              </el-select>
            </el-form-item>
            <el-form-item style="text-align:right">
              <el-button @click="clear()">清除</el-button>
              <el-button type="primary" @click="filter()">搜索</el-button>
            </el-form-item>
          </el-form>
        </el-col>
        <el-col :span="6" style="text-align:right">
          <el-button icon="el-icon-edit" type="success" @click.native="dialogVisible = true">新增目录</el-button>
        </el-col>
      </el-row>
      <!-- 数据记录 -->
      <el-alert
        style="margin-bottom:15px"
        :title="`数据一共 ${total} 条`"
        type="info"
        :closable="false"
        show-icon
      />
      <!-- 表格 -->
      <el-table
        :data="directorys"
        style="width: 100%"
      >
        <el-table-column
          type="index"
          label="序号"
          width="80px"
        />
        <el-table-column
          prop="subjectName"
          label="所属学科"
        />
        <el-table-column
          prop="directoryName"
          label="目录名称"
        />
        <el-table-column
          prop="username"
          label="创建者"
        />
        <el-table-column
          label="创建日期"
          width="150px"
        >
          <template slot-scope="scope">
            {{ scope.row.addDate|parseTimeByString }}
          </template>
        </el-table-column>
        <el-table-column
          prop="totals"
          label="面试题数量"
        />
        <el-table-column
          label="状态"
        >
          <template slot-scope="scope">
            {{ scope.row.state === 1 ? '已启用' : '已禁用' }}
          </template>
        </el-table-column>
        <el-table-column
          label="操作"
          width="150px"
        >
          <template slot-scope="scope">
            <el-button
              type="text"
              @click="toggleState(scope.row)"
            >{{ scope.row.state === 1 ? '禁用' : '启用' }}</el-button>
            <el-button type="text" :disabled="scope.row.state === 1" @click="openDialog(scope.row)">修改</el-button>
            <el-button type="text" :disabled="scope.row.state === 1" @click="delDirectory(scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页 -->
      <el-pagination
        style="margin-top:20px;text-align:right"
        background
        layout="prev, pager, next, sizes, jumper"
        :total="total"
        :page-sizes="[10,20,25]"
        :page-size="requestParams.pagesize"
        :current-page.sync="requestParams.page"
        @size-change="handleSizeChange"
        @current-change="pager"
      />
    </el-card>
    <!-- 添加/修改 -->
    <directorys-add ref="directorysAdd" :dialog-visible.sync="dialogVisible" :curr-directory="currDirectory" @updateList="updateList()" />
  </div>
</template>

<script>
import { list, changeState, remove } from '../../api/hmmm/directorys'
import DirectorysAdd from '../components/directorys-add.vue'
export default {
  components: {
    DirectorysAdd
  },
  data() {
    return {
      dialogVisible: false,
      requestParams: {
        directoryName: null,
        state: null,
        page: 1,
        pagesize: 10
      },
      directorys: [],
      total: 0,
      currDirectory: {}
    }
  },
  created() {
    this.getlist()
  },
  methods: {
    openDialog(row) {
      this.currDirectory = row
      this.$nextTick(() => {
        this.$refs.directorysAdd.open()
      })
    },
    // 新增
    updateList() {
      this.getlist()
    },
    // 删除
    async delDirectory(val) {
      await this.$confirm('此操作将永久删除该目录, 是否继续', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
      await remove(val)
      this.$message.success('删除成功')
      this.getlist()
    },
    // 获取目录列表
    async getlist() {
      const { data: { items, counts }} = await list(this.requestParams)
      this.directorys = items
      this.total = counts
      console.log(items)
      // const { data } = await list(this.requestParams)
      // this.directorys = data.items
      // this.total = data.counts
      // console.log(data)
    },
    // 清空关键字输入框
    clear() {
      this.requestParams = {
        directoryName: null,
        state: null,
        page: 1,
        pagesize: 10
      }
    },
    // 切换分页
    pager(np) {
      this.requestParams.page = np
      this.getlist()
    },
    // 切换条数
    handleSizeChange(size) {
      this.requestParams.page = 1
      this.requestParams.pagesize = size
      this.getlist()
    },
    // 切换状态
    async toggleState(directory) {
      await changeState({
        id: directory.id,
        state: directory.state === 1 ? 0 : 1
      })
      this.$message.success('操作成功')
      directory.state = directory.state === 1 ? 0 : 1
    },
    // 筛选
    filter() {
      this.requestParams.page = 1
      this.getlist()
    }
  }
}
</script>

<style lang="scss" scoped>
.directorys-container{
  padding: 10px;
}
</style>
